<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input {
            width: 200px;
            padding: 0;
            height: 30px;
        }

        .tip {
            margin: 10px 0;
            padding: 0;
            list-style: none;
            display: flex;
            width: 200px;
            height: 10px;
            justify-content: center
        }

        .tip li {
            flex: 1;
            margin: 0 5px;
            background: #ccc;
        }
    </style>
</head>
<body>

    <form autocomplete="off">
        <input type="text" id="password">
    </form>
    <ul class="tip">
        <li></li>
        <li></li>
        <li></li>
    </ul>

</body>

<script>
    var opw = document.getElementById("password");
    var ali = document.querySelectorAll(".tip li");

    opw.oninput = function () {
        var str = this.value;

        for (let i = 0; i < ali.length; i++) {
            ali[i].style.background = "#ccc";
        }

        var a = 0, b = 0, c = 0;

        for (let i = 0; i < str.length; i++) {
            let isNum = str[i] >= 0 && str[i] <= 9;
            let isLetter = (str[i] >= "a" && str[i] <= "z") || (str[i] >= "A" && str[i] <= "Z");
            if (isNum) {
                console.log("isNum")
                a = 1
            }

            if (isLetter) {
                console.log("isLetter")
                b = 1;
            }
            if (!(isLetter || isNum)) {
                console.log("isLetter " + isLetter);
                console.log("isNum " + isNum);
                console.log("是特殊字符")
                c = 1;
            }
        }
        for (let i = 0; i < a + b + c; i++) {
            ali[i].style.background = "red"
        }

    };

</script>

</html>